<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级管理 - 智慧排课系统</title>
    <script src="3.4.16"></script>
    <link href="font-awesome.min.css" rel="stylesheet">
    <!-- 在<head>部分添加 -->
    <script src="auth.js"></script>
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6', // 主色调-蓝色，代表教育与信任
                        secondary: '#10B981', // 辅助色-绿色，代表成长与活力
                        accent: '#F59E0B', // 强调色-橙色，用于重要操作
                        neutral: {
                            100: '#F3F4F6',
                            200: '#E5E7EB',
                            300: '#D1D5DB',
                            400: '#9CA3AF',
                            500: '#6B7280',
                            600: '#4B5563',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    }
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-height {
                transition: max-height 0.3s ease-in-out;
            }
            .table-cell-hover {
                @apply transition-all duration-200;
            }
            .subject-card {
                @apply bg-white rounded-lg shadow-card p-4 mb-3 cursor-move transition-all duration-300 hover:shadow-hover hover:-translate-y-1;
            }
            .timetable-cell {
                @apply border border-neutral-200 min-h-[100px] p-2 relative bg-white transition-all duration-200;
            }
            .timetable-cell-empty {
                @apply bg-neutral-50 hover:bg-neutral-100 cursor-pointer;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg;
            }
            .btn-secondary {
                @apply bg-white border border-neutral-300 text-neutral-700 font-medium py-2 px-4 rounded-lg transition-all duration-200 hover:bg-neutral-50;
            }
            .btn-accent {
                @apply bg-accent hover:bg-accent/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg;
            }
            .form-input {
                @apply w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .form-select {
                @apply w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 appearance-none bg-white;
            }
            .sidebar-item {
                @apply flex items-center px-4 py-3 text-neutral-600 hover:bg-primary/5 hover:text-primary rounded-lg transition-all duration-200;
            }
            .sidebar-item-active {
                @apply bg-primary/10 text-primary font-medium;
            }
        }
    </style>
</head>

<body class="bg-neutral-50 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-3">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-calendar-check-o text-primary text-2xl"></i>
                    <h1 class="text-xl font-bold text-neutral-800">智慧排课系统</h1>
                </div>

                <div class="hidden md:flex items-center space-x-6">
                    <a href="dashboard.html" class="text-primary font-medium">首页</a>
                    <a href="timetable.html" class="text-neutral-600 hover:text-primary transition-colors">课程管理</a>
                    <a href="teachers.html" class="text-neutral-600 hover:text-primary transition-colors">教师管理</a>
                    <a href="classes.html" class="text-neutral-600 hover:text-primary transition-colors">班级管理</a>
                    <a href="statistics.html" class="text-neutral-600 hover:text-primary transition-colors">统计分析</a>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索..."
                            class="pl-10 pr-4 py-2 rounded-lg border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
                    </div>

                    <div class="relative">
                        <button class="flex items-center space-x-2">
                            <img src="40.jpg" alt="用户头像"
                                class="w-8 h-8 rounded-full object-cover border-2 border-white shadow-sm">
                            <span class="hidden md:inline text-sm font-medium">管理员</span>
                            <i class="fa fa-angle-down text-neutral-400"></i>
                        </button>
                    </div>

                    <button class="md:hidden text-neutral-600">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>
    <!-- 主内容区 -->
    <div class="flex flex-1">
        <!-- 侧边栏 -->
        <aside
            class="hidden md:block w-64 bg-white shadow-sm h-[calc(100vh-4rem)] sticky top-16 overflow-y-auto transition-all duration-300">
            <div class="p-4">
                <h2 class="text-sm font-semibold text-neutral-500 uppercase tracking-wider mb-4">主菜单</h2>

                <nav>
                    <ul class="space-y-1">
                        <li>
                            <a href="dashboard.html" class="sidebar-item sidebar-item-active">
                                <i class="fa fa-tachometer w-5 h-5 text-center mr-3"></i>
                                <span>仪表盘</span>
                            </a>
                        </li>
                        <li>
                            <a href="timetable.html" class="sidebar-item">
                                <i class="fa fa-calendar w-5 h-5 text-center mr-3"></i>
                                <span>排课管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="courses.html" class="sidebar-item">
                                <i class="fa fa-book w-5 h-5 text-center mr-3"></i>
                                <span>课程设置</span>
                            </a>
                        </li>
                        <li>
                            <a href="teachers.html" class="sidebar-item">
                                <i class="fa fa-users w-5 h-5 text-center mr-3"></i>
                                <span>教师管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="classes.html" class="sidebar-item">
                                <i class="fa fa-graduation-cap w-5 h-5 text-center mr-3"></i>
                                <span>班级管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="classrooms.html" class="sidebar-item">
                                <i class="fa fa-building w-5 h-5 text-center mr-3"></i>
                                <span>教室管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="sidebar-item">
                                <i class="fa fa-bar-chart w-5 h-5 text-center mr-3"></i>
                                <span>统计分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="sidebar-item">
                                <i class="fa fa-cog w-5 h-5 text-center mr-3"></i>
                                <span>系统设置</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div class="p-4 border-t border-neutral-100">
                <h2 class="text-sm font-semibold text-neutral-500 uppercase tracking-wider mb-4">快速访问</h2>
                <nav>
                    <ul class="space-y-1">
                        <li>
                            <a href="#" class="sidebar-item">
                                <i class="fa fa-plus-circle w-5 h-5 text-center mr-3"></i>
                                <span>添加新课程</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="sidebar-item">
                                <i class="fa fa-plus-square w-5 h-5 text-center mr-3"></i>
                                <span>添加新教师</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="sidebar-item">
                                <i class="fa fa-plus w-5 h-5 text-center mr-3"></i>
                                <span>添加新班级</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </aside>

        <!-- 班级管理内容 -->
        <main class="flex-1 overflow-y-auto bg-neutral-50 p-4 md:p-6">
            <div class="mb-6">
                <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-800">班级管理</h1>
                <p class="text-neutral-500 mt-1">管理学校班级信息和学生情况</p>
            </div>

            <!-- 班级列表表格 -->
            <div class="bg-white rounded-xl shadow-sm p-5">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-semibold text-neutral-800">班级列表</h2>
                    <button class="btn-primary">
                        <i class="fa fa-plus mr-2"></i>添加班级
                    </button>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="bg-neutral-100 text-neutral-600 text-sm">
                                <th class="p-3 text-left">班级名称</th>
                                <th class="p-3 text-left">年级</th>
                                <th class="p-3 text-left">班主任</th>
                                <th class="p-3 text-left">学生人数</th>
                                <th class="p-3 text-left">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b border-neutral-200 hover:bg-neutral-50">
                                <td class="p-3">一年级一班</td>
                                <td class="p-3">一年级</td>
                                <td class="p-3">张老师</td>
                                <td class="p-3">45</td>
                                <td class="p-3">
                                    <button class="text-blue-500 hover:text-blue-700 mr-2">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-red-500 hover:text-red-700">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <!-- 页脚 (与timetable.html相同) -->
    // ... existing code from timetable.html footer ...
</body>

</html>